<!DOCTYPE html>
<html>

<head lang='zh'>
	<meta charset='utf-8'>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="renderer" content="webkit" />
	<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0" />
	<title>Luckysheet</title>

	<link rel='stylesheet' href='../dist/plugins/css/pluginsCss.css' />
	<link rel='stylesheet' href='../dist/plugins/plugins.css' />
	<link rel='stylesheet' href='../dist/css/luckysheet.css' />
	<link rel='stylesheet' href='../dist/assets/iconfont/iconfont.css' />

</head>

<body>
	<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>
	<!-- demo feature, non-production use -->
	<script src="../dist/plugins/js/plugin.js"></script>
    <script src="../dist/luckysheet.umd.js"></script>

	<script>
		var optionsTemplete = {
            lang: 'zh', // 设定表格语言
            container: 'luckysheet', //luckysheet为容器id
            title: 'dsas', // 设定表格名称
            column: 2,//默认列数
            row: 1,//默认行数
            autoFormatw: false,//自动格式化超过4位数的数字为‘亿万格式’
            forceCalculation: false,//强制刷新公式,公式较多时会有性能问题
            enableAddBackTop: false,//允许回到顶部
            enableAddRow: false, //底部是否显示添加多行
            showinfobar: false,//是否显示顶部信息栏
            showstatisticBar: false,//是否显示底部计数栏
            showstatisticBarConfig: {//自定义配置底部计数栏
                count: false, // 计数栏
                view: false, // 打印视图
                zoom: false // 缩放
            },
            showsheetbar: false,//是否显示底部sheet页按钮
            showsheetbarConfig: {//自定义底部sheet页按钮
                add: true, //新增sheet
                menu: false, //sheet管理菜单
                sheet: true //sheet页显示
            },
            sheetRightClickConfig: {//自定义配置sheet页右击菜单
                delete: true, // 删除
                copy: false, // 复制
                rename: true, //重命名
                color: false, //更改颜色
                hide: false, //隐藏，取消隐藏
                move: false //向左移，向右移
            },
            cellRightClickConfig: {
                copy: true, // 复制
                copyAs: false, // 复制为
                paste: true, // 粘贴
                insertRow: true, // 插入行
                insertColumn: true, // 插入列
                deleteRow: true, // 删除选中行
                deleteColumn: true, // 删除选中列
                deleteCell: false, // 删除单元格
                hideRow: false, // 隐藏选中行和显示选中行
                hideColumn: false, // 隐藏选中列和显示选中列
                rowHeight: false, // 行高
                columnWidth: false, // 列宽
                clear: true, // 清除内容
                matrix: false, // 矩阵操作选区
                sort: false, // 排序选区
                filter: false, // 筛选选区
                chart: false, // 图表生成
                image: false, // 插入图片
                link: false, // 插入链接
                data: true, // 数据验证
                cellFormat: false, // 设置单元格格式
                sysextends: true, //自定义扩展控件
                fileUpload: true, //自定义文件上传
                fileDownLoad: true //自定义文件下载
            },
            showtoolbar: false,//是否显示工具栏
            showtoolbarConfig: {//自定义工具栏
                undoRedo: true, //撤销重做，注意撤消重做是两个按钮，由这一个配置决定显示还是隐藏
                paintFormat: true, //格式刷
                currencyFormat: false, //货币格式
                percentageFormat: false, //百分比格式
                numberDecrease: false, // '减少小数位数'
                numberIncrease: false, // '增加小数位数
                moreFormats: true, // '更多格式'
                font: true, // '字体'
                fontSize: true, // '字号大小'
                bold: true, // '粗体 (Ctrl+B)'
                italic: true, // '斜体 (Ctrl+I)'
                strikethrough: true, // '删除线 (Alt+Shift+5)'
                underline: true, // '下划线 (Alt+Shift+6)'
                textColor: true, // '文本颜色'
                fillColor: true, // '单元格颜色'
                border: true, // '边框'
                mergeCell: true, // '合并单元格'
                horizontalAlignMode: true, // '水平对齐方式'
                verticalAlignMode: true, // '垂直对齐方式'
                textWrapMode: true, // '换行方式'
                textRotateMode: false, // '文本旋转方式'
                image:false, // '插入图片'
                link:false, // '插入链接'
                chart: false, // '图表'（图标隐藏，但是如果配置了chart插件，右击仍然可以新建图表）
                postil:  true, //'批注'
                pivotTable: false,  //'数据透视表'
                function: true, // '公式'
                frozenMode: false, // '冻结方式'
                sortAndFilter: false, // '排序和筛选'
                conditionalFormat: false, // '条件格式'
                dataVerification: true, // '数据验证'
                splitColumn: false, // '分列'
                screenshot: false, // '截图'
                findAndReplace: false, // '查找替换'
                protection:true, // '工作表保护'
                print:false // '打印'
            },
            hook:{
                
            }
        };
        let optionsData = `[{"luckysheet_select_save":[{"top_move":0,"top":0,"column_focus":0,"left":0,"column":[0,0],"width":73,"left_move":0,"width_move":73,"row":[0,0],"row_focus":0,"height_move":19,"height":19}],"color":"","data":[[{"ct":{"t":"n","fa":"General"},"v":"a1","m":"是"},null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null]],"index":0,"jfgird_select_save":[],"rh_height":429,"visibledatacolumn":[74,148,222,296,370,444,518,592,666,740,814,888,962,1036,1110,1184],"visibledatarow":[20,40,60,80,100,120,140,160,180,200,220,240,260,280,300,320,340,360,380,400],"name":"Sheet1","luckysheet_selection_range":[],"celldata":[{"r":0,"c":0,"v":{"ct":{"t":"n","fa":"General"},"v":"1","m":"是"}}],"ch_width":1304,"zoomRatio":1,"config":{"borderInfo":[{"borderType":"border-all","rangeType":"range","color":"#000","range":[{"top_move":0,"top":0,"left":0,"column_focus":0,"width":73,"left_move":0,"column":[0,0],"width_move":73,"row":[0,0],"height_move":19,"row_focus":0,"height":19}],"style":"1"}]},"status":"1","order":"0"}]`;
        optionsTemplete.data = JSON.parse(optionsData);
        //创建模板
        luckysheet.create(optionsTemplete);
			
	</script>
<style>
	/* 自定义loading演示样式 */
	@keyframes loading-rotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes loading-dash {
		0% {
			stroke-dasharray: 1, 200;
			stroke-dashoffset: 0;
		}

		50% {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -40px;
		}

		100% {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -120px;
		}
	}

	.loadingAnimation {
		width: 3em;
		height: 3em;
		animation: loading-rotate 2s linear infinite;
	}

	.loadingAnimation circle {
		animation: loading-dash 1.5s ease-in-out infinite;
		stroke-dasharray: 90, 150;
		stroke-dashoffset: 0;
		stroke-width: 2;
		stroke: currentColor;
		stroke-linecap: round;
	}
</style>
</body>

</html>